<template>
  <div>
    <el-collapse v-model="first">
      <el-collapse-item name="1">
        <template slot="title">
          <span><h3 style="color:#2693fa"><i class="el-icon-view"></i> 基础信息</h3></span>
        </template>
<!--        <hr style="height:1px;border:none;border-top:1px solid #a5aad7;margin-bottom: 20px"/>-->
        <avue-form ref="form"
                   v-model="modelForm"
                   :option="modelOption"></avue-form>
      </el-collapse-item>
      <el-collapse-item title="反馈 Feedback" name="2">
        <template slot="title">
          <span><h3 style="color:#2693fa"><i class="el-icon-tickets"></i> 属性字段</h3></span>
        </template>
<!--        <hr style="height:1px;border:none;border-top:1px solid #a5aad7;margin-bottom: 20px"/>-->
        <el-tabs v-model="firstName" type="card" @tab-click="handleClick">
          <el-tab-pane
            :key="item.name"
            v-for="(item) in modelForm.allTablesInfo"
            :label="item.title"
            :name="item.name"
          >
            <avue-crud :option="tableOption"
                       :table-loading="tableLoading"
                       :data="showData"
                       :page.sync="tablePage"
                       v-model="tableForm"
                       @size-change="sizeChange"
                       @current-change="currentChange"
                       ref="tableCrud"></avue-crud>
          </el-tab-pane>
        </el-tabs>
      </el-collapse-item>
      <el-collapse-item title="效率 Efficiency" name="3">
        <template slot="title">
          <span><h3 style="color:#2693fa"><i class="el-icon-document-copy"></i> 主题表信息</h3></span>
        </template>
<!--        <hr style="height:1px;border:none;border-top:1px solid #a5aad7;margin-bottom: 20px"/>-->
        <avue-crud :option="finishOption"
                   :table-loading="finishLoading"
                   :data="showDataThemeTable"
                   :page.sync="finishPage"
                   @size-change="sizeChangeThemeTable"
                   @current-change="currentChangeThemeTable"
                   ref="finishCrud"></avue-crud>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>

    export default {
        name: "model_view",
        data() {
            return {
                modelOption: {
                    calcHeight: 30,
                    dialogWidth: 900,
                    tip: false,
                    searchShow: true,
                    searchMenuSpan: 6,
                    border: true,
                    index: true,
                    viewBtn: true,
                    selection: true,
                    dialogClickModal: false,
                    saveBtn: false,
                    cancelBtn: false,
                    detail: true,
                    indexLabel: '序号',
                    addTitle: '基础信息',
                    submitBtn:false,
                    emptyBtn:false,
                    column: [
                        {
                            label: "模型名称",
                            prop: "modelName",
                            span: 8
                        },
                        {
                            label: "模型代码",
                            prop: "modelCode",
                            span: 8
                        },
                        {
                            label: "关联表数",
                            prop: "associatedNumber",
                            span: 8
                        },
                        {
                            label: "创建时间",
                            prop: "createTime",
                            span: 8
                        },
                        {
                            label: "统计类型",
                            prop: "statisticalType",
                            type: 'select',
                            dicUrl: "/api/blade-system/dict-biz/dictionary?code=statisticalType",
                            props: {
                                label: "dictValue",
                                value: "dictKey"
                            },
                            span: 8
                        },
                        {
                            label: "数据源",
                            prop: "datasourceId",
                            type: 'select',
                            dicUrl: '/api/data-quality/datasource/businessModelList',
                            props: {
                                label: "name",
                                value: "id"
                            },
                            span: 8
                        },
                        {
                            label: "数据表",
                            prop: "dataTables",
                          span:24
                        },
                        {
                            label: "描述",
                            prop: "remark",
                            span: 24,
                            minRows: 2,
                            type: "textarea",
                            maxlength: 1000,
                            showWordLimit: true
                        },
                    ]
                },
                tableOption: {
                    calcHeight: 30,
                    dialogWidth: 900,
                    tip: false,
                    searchShow: true,
                    searchMenuSpan: 6,
                    border: true,
                    index: true,
                    viewBtn: false,
                    selection: false,
                    dialogClickModal: false,
                    saveBtn: false,
                    addBtn: false,
                    delBtn: false,
                    columnBtn: false,
                    refreshBtn: false,
                    indexLabel: '序号',
                    header: false,
                    menuWidth: 150,
                    editBtn: false,
                    menu: false,
                    column: [
                        {
                            label: "中文名称",
                            prop: "chName",
                        },
                        {
                            label: "英文名称",
                            prop: "name",
                        },
                        {
                            label: "字段类型",
                            prop: "type",
                            width:100
                        },
                        {
                            label: "字段长度",
                            prop: "dataSize",
                            width:80
                        },
                        {
                            label: "小数位",
                            prop: "digits",
                            width:80
                        },
                        {
                            label: "是否允许为空",
                            prop: "nullable",
                            type: 'radio',
                            editDisplay: false,
                            dicData: [
                                {
                                    label: '是',
                                    value: 1
                                },
                                {
                                    label: '否',
                                    value: 0
                                },
                            ],
                            width:100
                        },
                        {
                            label: "默认值",
                            prop: "defaultValue",
                            width:80
                        },
                        {
                            label: "是否唯一",
                            prop: "ifUnique",
                            type: 'radio',
                            dicData: [
                                {
                                    label: '是',
                                    value: 1
                                },
                                {
                                    label: '否',
                                    value: 0
                                },
                            ],
                            width:80
                        },
                        {
                            label: "字段描述",
                            prop: "remark",
                        },
                    ]
                },
                finishOption: {
                    calcHeight: 30,
                    dialogWidth: 900,
                    tip: false,
                    searchShow: true,
                    searchMenuSpan: 6,
                    border: true,
                    index: true,
                    viewBtn: false,
                    selection: false,
                    dialogClickModal: false,
                    saveBtn: false,
                    addBtn: false,
                    delBtn: false,
                    columnBtn: false,
                    refreshBtn: false,
                    indexLabel: '序号',
                    header: false,
                    menuWidth: 150,
                    labelWidth: 130,
                    menu: false,
                    cellBtn: true,
                    column: [
                        {
                            label: "表名",
                            prop: "name",
                        },
                        {
                            label: "主题表名称",
                            prop: "title",
                        },
                      {
                        label: "质检时间字段",
                        prop: "qualityTestingTimeField",
                      },
                        {
                            label: "标题",
                            prop: "remarks",
                        },
                    ]
                },
                tableLoading: false,
                finishLoading: false,
                tablePage: {
                    pageSize: 10,
                    currentPage: 1,
                    total: 0
                },
                finishPage: {
                    pageSize: 10,
                    currentPage: 1,
                    total: 0
                },
                firstName: '',
                currentTab: '',
                showData: [],
                showDataThemeTable: [],
                first:'1'
            }
        },
        props: {
            modelForm: {},
        },
        created() {
            this.initData();
        },
        methods: {
            handleClick(tab) {
                this.currentTab = tab.name;
                this.tablePage = {pageSize: 10, currentPage: 1, total: 0};
                this.onLoad(this.tablePage);
            },
            initData() {
                this.firstName = this.modelForm.allTablesInfo[0].name;
                this.currentTab = this.modelForm.allTablesInfo[0].name;
                this.onLoad(this.tablePage);
                this.onLoadThemeTable(this.finishPage);
            },
            currentChange(currentPage) {
                this.tablePage.currentPage = currentPage;
                this.onLoad(this.tablePage);
            },
            sizeChange(pageSize) {
                this.tablePage.pageSize = pageSize;
                this.onLoad(this.tablePage);
            },
            onLoad(page) {
                this.tableLoading = true;
                let currentPage = page.currentPage;
                let pageSize = page.pageSize;
                let start = (currentPage - 1) * pageSize;
                let end = currentPage * pageSize;
                this.modelForm.allTablesInfo.forEach(item => {
                    if (this.currentTab == item.name) {
                        this.showData = item.data.slice(start, end);
                        this.tablePage.total = item.data.length;
                        this.tableLoading = false;
                    }
                })
            },
            onLoadThemeTable(page) {
                this.finishLoading = true;
                let currentPage = page.currentPage;
                let pageSize = page.pageSize;
                let start = (currentPage - 1) * pageSize;
                let end = currentPage * pageSize;
                this.showDataThemeTable = this.modelForm.allTablesInfo.slice(start, end);
                this.finishPage.total = this.modelForm.allTablesInfo.length;
                this.finishLoading = false;
            },
            currentChangeThemeTable(currentPage) {
                this.finishPage.currentPage = currentPage;
                this.onLoadThemeTable(this.finishPage);
            },
            sizeChangeThemeTable(pageSize) {
                this.finishPage.pageSize = pageSize;
                this.onLoadThemeTable(this.finishPage);
            },
        }
    }
</script>

<style scoped>
  /deep/.el-collapse {
    border-top: 1px solid rgba(0,0,0,0);
    border-bottom: 1px solid rgba(0,0,0,0);
  }
</style>
